<%--
  Created by IntelliJ IDEA.
  User: 28237
  Date: 2021/11/12
  Time: 17:16
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" language="java"%>
<!-- use EL-Expression-->
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>注册页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <link href="${pageContext.request.contextPath}/static/layui/css/layui.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/loginAndRegister1.css" rel="stylesheet">
</head>

<script>
    layui.use(['layer'],function () {
        var layer = layui.layer;
    });
    $(function () {
        //监听注册点击事件,跳转注册页面
        $("#loginBtn").click(function () {
            register();
        });

        //监听重置点击事件
        $("#reBtn").click(function () {
            $('#form')[0].reset()
        });

    });


    // 校验输入格式是否正确
    function validateCode() {
        //输入的用户名
        var loginUsername = $('#loginUsername').val();
        //表单输入的密码
        var loginPassword = $('#loginPassword').val();
        //确认密码
        var confirmPassword = $('#confirmPassword').val();
        //输入的性别
        var gender = $('#gender').val();
        //输入的邮箱
        var email = $('#loginEmail').val();
        //输入电话
        var phone = $('#loginPhone').val();
        //输入地址
        var address = $('#loginAddress').val();


        if ($.trim(loginUsername) == '' || $.trim(loginUsername).length<=0){
            layer.alert("用户名不能为空");
            return false;
        }
        if ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
            layer.alert("密码不能为空");
            return false;
        }
        if(loginPassword != confirmPassword){
            layer.alert("两次输入的密码不一致！");
            return false;
        }
        if ($.trim(email) == '' || $.trim(email).length<=0){
            layer.alert("邮箱不能为空");
            return false;
        }
        if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email)) {
            layer.alert("邮箱格式错误！");
            return false;
        }
        if ($.trim(gender) == '' || $.trim(gender).length<=0){
            layer.alert("请选择性别");
            return false;
        }
        if ($.trim(phone) == '' || $.trim(phone).length<=0){
            layer.alert("电话号码不能为空");
            return false;
        }
        if ($.trim(address) == '' || $.trim(address).length<=0){
            layer.alert("地址不能为空");
            return false;
        }

        return true;
    }

    // 注册流程
    function register() {
        //判断输入是否正确
        if (!validateCode()){
            //阻断提示
        }else {
            var loginUsername = $('#loginUsername').val();
            var loginPassword = $('#loginPassword').val();
            var gender = $('#gender').val();
            var email = $('#loginEmail').val();
            var phone = $('#loginPhone').val();
            var address = $('#loginAddress').val();
            var params = {};
            params.name = loginUsername;
            params.password = loginPassword;
            params.gender = gender;
            params.telephone = phone;
            params.email = email;
            params.address = address;

            var loginLoadIndex = layer.load(2);//加载风格
            $('#loginBtn').val("正在提交...");
            $.ajax({
                type:'post',
                url:"${pageContext.request.contextPath}/system/register",
                dataType:'json',
                contentType:'application/json',
                data:JSON.stringify(params),
                success:function (data) {
                    console.log('data ' + data)
                    layer.close(loginLoadIndex);
                    if (data.success){
                        window.location.href = "${pageContext.request.contextPath}/system/goLogin";//进入登录页面
                    }else {
                        alert(data.msg);
                    }
                },
                error:function (data) {
                    layer.close(loginLoadIndex);
                    $('#loginBtn').val("提交");
                    alert(data.msg);

                }
            });
        }
    }
</script>

<body>
<div class="wrap">
    <img src="${pageContext.request.contextPath}/static/images/xiaowu.jpg" class="imgStyle">
    <div class="RegisterForm">
        <form id="form">
            <div class="logoHead">
                <h1 style="text-align: center">新用户注册</h1>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>用户名:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="loginUsername" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="loginPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                </div>
            </div>

            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>确认密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="confirmPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                </div>
            </div>

            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>性别：</label>
                </div>
                <div class="genderDiv">
                    <i class="layui-icon layui-icon-male adminIcon"></i>
                    <input id="gender" class="layui-input adminInput" type="text" list="typelist" placeholder="请选择性别">
                    <datalist id="typelist">
                        　　<option>男</option>
                        　　<option>女</option>
                    </datalist>
                </div>
            </div>

            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>邮箱：</label>
                </div>
                <div class="emailDiv">
                    <i class="layui-icon layui-icon-home adminIcon"></i>
                    <input id="loginEmail" class="layui-input adminInput" type="email" name="email" placeholder="输入邮箱" >
                </div>
            </div>

            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>电话：</label>
                </div>
                <div class="phoneDiv">
                    <i class="layui-icon layui-icon-cellphone adminIcon"></i>
                    <input id="loginPhone" class="layui-input adminInput" type="text" name="phone" placeholder="输入电话">
                </div>
            </div>

            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>地址：</label>
                </div>
                <div class="addressDiv">
                    <i class="layui-icon layui-icon-location adminIcon"></i>
                    <input id="loginAddress" class="layui-input adminInput" type="text" name="address" placeholder="输入地址">
                </div>
            </div>


            <div class="usernameWrapDiv">
                <div class="submitDiv" style="margin-left: 70px">
                    <input id="reBtn" type="button" class="submit layui-btn layui-btn-primary" value="重置"></input>
                </div>
                <div class="submitDiv">
                    <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="提交"></input>
                </div>
            </div>

        </form>
    </div>
</div>
</body>
</html>
